<template>
  <div class="ze-ellipsis" :style="lineClampStyle">
    {{ content }}
  </div>
</template>

<script>
export default {
  props: {
    /** 超出 n 行省略，默认 1 */
    line: {
      type: Number,
      default: 1,
    },
    /** 文本内容 */
    content: {
      type: String,
      default: '',
    },
  },
  computed: {
    lineClampStyle() {
      return `--line-clamp: ${this.line};`
    },
  },
}
</script>

<style lang="scss" scoped>
.ze-ellipsis {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
}
</style>
